<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      title="我的发布"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs v-model="active" sticky swipeable>
      <van-tab title="出售中" badge="">
        <div class="contarnue">
          <div
            class="list-item"
            v-for="item in fabuList"
            :key="item.goodsId"
            v-show="item.goodsFinish === 0"
          >
            <div class="item2-box clearfix">
              <div class="item-pic">
                <img :src="item.picUrl" />
              </div>
              <div class="item-content">
                <div class="content">
                  <h6>{{ item.goodsTitle }}</h6>
                  <p class="shijian">发布时间:{{ item.addTime }}</p>
                  <div v-if="item.goodsFinish === 0">
                    <van-button
                      type="warning"
                      size="small"
                      @click="chjiao(item)"
                      >成交</van-button
                    >
                    <van-button
                      type="warning"
                      size="small"
                      v-if="item.goodsStatus === 1"
                      @click="outjia(item)"
                      >下架</van-button
                    >
                    <van-button
                      type="warning"
                      size="small"
                      v-if="item.goodsStatus === 0"
                      @click="upjia(item)"
                      >上架</van-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已成交">
        <div class="contarnue">
          <div class="list-item" v-for="item in chengjiao" :key="item.goodsId">
            <div class="item2-box clearfix">
              <div class="item-pic">
                <img :src="item.picUrl" />
              </div>
              <div class="item-content">
                <div class="content">
                  <h6>{{ item.goodsTitle }}</h6>
                  <p class="shijian">完成时间:{{ item.finishtime }}</p>
                  <van-button
                    type="warning"
                    size="small"
                    @click="deletea(item.goodsId)"
                    >删除</van-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  name: "ToutiaoMyfabu",

  components: {},

  directives: {},

  data() {
    return {
      active: 0,
      fabuList: [],
      chengjiao: [],
    };
  },

  mounted() {},
  created() {
    // this.getall();
    this.getAllGoods();
    this.getAllchengjiao();
    // this.fabuNum();
    // this.fabuList = JSON.parse(localStorage.getItem("goodsList"));
  },
  methods: {
    // 获取成交列表
    async getAllchengjiao() {
      let data = {
        finish: 1,
        userId: localStorage.getItem("id"),
      };
      const { data: res } = await this.$http.get("/api/goods/list", {
        params: data,
      });
      //console.log(res);
      this.geshiLists(res);
      this.chengjiao = res.data.reverse();
      localStorage.removeItem("goodsList");
    },

    // async getall() {
    //   const { data: res } = await this.$http.get("/api/goods/list");
    //   //console.log(res);
    // },
    // 获取商品列表
    async getAllGoods() {
      let data = {
        finish: 0,
        userId: localStorage.getItem("id"),
      };
      const { data: res } = await this.$http.get("/api/goods/list", {
        params: data,
      });
      //console.log(res);
      this.geshiLists(res);
      this.fabuList = res.data.reverse();
      localStorage.removeItem("goodsList");
    },
    // 处理goodslist
    geshiLists(res) {
      let that = this;
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].addTime = that
          .$moment(res.data[i].addTime)
          .format("YYYY-MM-DD");
        res.data[i].picUrl = that.getPic(res.data[i].goodsId, 1);
        res.data[i].finishtime = that
          .$moment(res.data[i].finishTime)
          .format("YYYY-MM-DD");
      }
    },
    getPic(goodsId, type) {
      let str = "";
      $.ajax({
        type: "get",
        url: `http://121.4.40.144/api/photo/${goodsId}/${type}`,
        dataType: "json",
        contentType: "application/json",
        async: false,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          //console.log(res);
          str = res.data[0].phoUrl;
        },
      });
      return str;
    },

    chjiao(item) {
      let data = {
        goodsId: item.goodsId,
        userId: item.userId,
        cateId: item.cateId,
        goodsTitle: item.goodsTitle,
        chengseId: 2,
        market: item.market,
        price: item.price,
        peisongType: item.peisongType,
        address: item.address,
        content: item.content,
        clicks: 0,
        xm: item.xm,
        qq: item.qq,
        wx: item.wx,
        goodsFinish: 1,
        finishTime: Date.now(),
        goodsStatus: 0,
      };
      let goodsId = item.goodsId;
      let that = this;
      $.ajax({
        type: "PUT",
        url: `http://121.4.40.144/api/goods/${goodsId}`,
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("修改失败");
          } else {
            Toast("修改成功");
            that.getAllGoods();
          }
        },
      });
    },
    outjia(item) {
      let data = {
        goodsId: item.goodsId,
        userId: item.userId,
        cateId: item.cateId,
        goodsTitle: item.goodsTitle,
        chengseId: 2,
        market: item.market,
        price: item.price,
        peisongType: item.peisongType,
        address: item.address,
        content: item.content,
        clicks: 0,
        xm: item.xm,
        qq: item.qq,
        wx: item.wx,
        goodsFinish: 0,
        finishTime: Date.now(),
        goodsStatus: 0,
      };
      let goodsId = item.goodsId;
      let that = this;

      $.ajax({
        type: "PUT",
        url: `http://121.4.40.144/api/goods/${goodsId}`,
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("修改失败");
          } else {
            Toast("修改成功");
            that.getAllGoods();
          }
        },
      });
    },
    upjia(item) {
      let data = {
        goodsId: item.goodsId,
        userId: item.userId,
        cateId: item.cateId,
        goodsTitle: item.goodsTitle,
        chengseId: item.chengseId,
        market: item.market,
        price: item.price,
        peisongType: item.peisongType,
        address: item.address,
        content: item.content,
        clicks: 0,
        xm: item.xm,
        qq: item.qq,
        wx: item.wx,
        goodsFinish: 0,
        finishTime: Date.now(),
        goodsStatus: 1,
      };
      let goodsId = item.goodsId;
      let that = this;
      $.ajax({
        type: "PUT",
        url: `http://121.4.40.144/api/goods/${goodsId}`,
        data: JSON.stringify(data),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("修改失败");
          } else {
            Toast("修改成功");
            that.getAllGoods();
          }
        },
      });
    },
    deletea(id) {
      let that = this;
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/goods/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            Toast("删除成功");
            that.getAllchengjiao();
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.contarnue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 52px;
  top: 100px;
  overflow-y: auto;
}
.list-item {
  border-bottom: 5px solid #f2f2f2;
  padding: 0 15px;
}
.list-item__hd {
  padding-top: 8px;
  height: 25px;
  line-height: 25px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.hd-rt {
  float: right;
  font-size: 0.8em;
}
.item2-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 15px 0;
  background: #fff;
  margin-bottom: 1px;
}
.clearfix:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.item2-box .item-pic {
  width: 90px;
  height: 90px;
  position: relative;
}
.item-pic img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.item-content {
  position: relative;
  padding-left: 10px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
}
.content h6 {
  font-weight: 500;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  font-size: 17px;
}
.shijian {
  height: 24px;
  margin-top: 0px;
  line-height: 24px;
  color: #9c9c9c;
  overflow: hidden;
  font-size: 13.5px;
  padding: 1px 0;
}
/deep/.van-button--small {
  margin-left: 16px;
}
</style>